<template>
  <div class="wrap">
    <div class="top">
      <div class="titlts">
        <img src="../assets/list.png" alt srcset />
        <p>数据类型</p>
      </div>
      <div class="role">
        <el-button :type="userType==1?'primary':''" @click="select(1)">用户数据</el-button>
        <el-button :type="userType==2?'primary':''" @click="select(2)">订单数据</el-button>
      </div>
    </div>
    <template v-if="userType==2">
      <div class="titlts">
        <img src="../assets/list.png" alt srcset />
        <p>订单数据统计</p>
      </div>
      <div class="m-table">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="date" label="日期"></el-table-column>
          <el-table-column prop="order" align="center" label="订单"></el-table-column>
          <el-table-column prop="df" align="center" label="代发订单"></el-table-column>
          <el-table-column prop="shrs" label="送货人数" align="center"></el-table-column>
          <el-table-column prop="qhrs" align="center" label="取货人数"></el-table-column>
          <el-table-column prop="khdf" align="center" label="客户代发人数"></el-table-column>
          <el-table-column prop="sjdf" align="center" label="商家代发人数"></el-table-column>
        </el-table>
      </div>
      <div class="titlts">
        <img src="../assets/list.png" alt srcset />
        <p>订单量趋势图（所有商家）</p>
      </div>
      <div class="block" style="margin-top:30px;">
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="setTime"
        ></el-date-picker>
      </div>
      <div>
        <div id="myChart" :style="{width: '100%', height: '300px'}"></div>
      </div>
      <div class="top">
        <div class="titlts">
          <img src="../assets/list.png" alt srcset />
          <p>订单数据明细</p>
        </div>
        <div class="role">
          <el-button :type="userType1==2?'primary':''" @click="userType1=2">商家</el-button>
          <el-button :type="userType1==1?'primary':''" @click="userType1=1">用户</el-button>
        </div>
      </div>
      <div class="s-table">
        <!-- <div class="ol">
          <el-input placeholder="请输入..."></el-input>
          <el-button type="primary">搜索</el-button>
        </div>-->
        <!-- 商家 -->
        <el-table :data="biztableData" v-if="userType1==2" stripe style="width: 100%">
          <el-table-column type="index" width="50" v-if="userType1==2"></el-table-column>
          <el-table-column label="名称">
            <template slot-scope="scope" v-if="userType1==2">
              <div class="userheadInfo">
                <img :src="scope.row.avatar" alt />
                <div>
                  <span>{{scope.row.username}}</span>
                  <div class="okl">
                    <i>关注数：{{scope.row.follow_total}}</i>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="order_total" align="center" sortable label="今日订单"></el-table-column>
          <el-table-column prop="proxy_total" align="center" sortable label="今日代发"></el-table-column>
          <el-table-column prop="supplier_total" align="center" sortable label="今日送货人数"></el-table-column>
          <el-table-column prop="customer_total" align="center" sortable label="今日取货人数"></el-table-column>
          <el-table-column prop="proxy_person_total" align="center" sortable label="今日代发人数"></el-table-column>
          <el-table-column prop="followNum" align="center" label="历史数据">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="showInfoHistory(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="paginationBox" v-if="userType1==2">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total2"
            :current-page="currentPage2"
            :page-size="pageSize2"
            @current-change="setpage2"
          ></el-pagination>
        </div>
        <!-- 客户 -->
        <el-table :data="custableData" v-if="userType1==1" stripe style="width: 100%">
          <el-table-column v-if="userType==2" type="index" width="50"></el-table-column>
          <el-table-column label="名称">
            <template slot-scope="scope">
              <div class="userheadInfo">
                <img :src="scope.row.avatar" alt />
                <div>
                  <span>{{scope.row.username}}</span>
                  <div class="okl">
                    <i>关注数：{{scope.row.follow_total}}</i>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="supplier_total" align="center" sortable label="今日送货单"></el-table-column>
          <el-table-column prop="customer_total" align="center" sortable label="今日取货单"></el-table-column>
          <el-table-column prop="proxy_total" align="center" sortable label="今日代发"></el-table-column>
          <el-table-column prop="customer_biz_total" align="center" sortable label="今日取货商家数"></el-table-column>
          <el-table-column prop="supplier_biz_total" align="center" sortable label="今日送货商家数"></el-table-column>
          <el-table-column prop="followNum" align="center" label="历史数据">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="showInfoCus(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="paginationBox" v-if="userType1==1">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :current-page="currentPage"
            :page-size="pageSize"
            @current-change="setpage"
          ></el-pagination>
        </div>
      </div>
    </template>
    <!-- 用户数据 -->
    <template v-if="userType==1">
      <div class="titlts">
        <img src="../assets/list.png" alt srcset />
        <p>订单数据统计</p>
        <span>今日指标</span>
      </div>
      <div class="infoList">
        <div class="infoItem">
          <p>新增客户</p>
          <p class="num">{{userDayData.customerCount}}</p>
        </div>
        <div class="infoItem">
          <p>累计客户</p>
          <p class="num">{{userDayData.customerSum}}</p>
        </div>
        <div class="infoItem">
          <p>新增续费商家</p>
          <p class="num">{{userDayData.rechargeCount}}</p>
        </div>
        <div class="infoItem">
          <p>累计续费商家</p>
          <p class="num">{{userDayData.rechargeSum}}</p>
        </div>
        <div class="infoItem">
          <p>新增商家</p>
          <p class="num">{{userDayData.bizCount}}</p>
        </div>
        <div class="infoItem">
          <p>累计商家</p>
          <p class="num">{{userDayData.bizSum}}</p>
        </div>
      </div>
      <div class="top">
        <div class="titlts">
          <img src="../assets/list.png" alt srcset />
          <p>趋势图</p>
        </div>
        <div class="role">
          <el-button :type="userType2==2?'primary':''" round @click="select2(2)">商家</el-button>
          <el-button :type="userType2==1?'primary':''" round @click="select2(1)">用户</el-button>
        </div>
      </div>
      <div class="block" style="margin-top:30px;" v-if="userType2==2">
        <el-date-picker
          v-model="value2"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期1"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="setTime2"
        ></el-date-picker>
      </div>
      <div class="block" style="margin-top:30px;" v-if="userType2==1">
        <el-date-picker
          v-model="value3"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期2"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="setTime3"
        ></el-date-picker>
      </div>
      <div>
        <div id="myChart2" v-if="userType2==2" :style="{width: '100%', height: '300px'}"></div>
      </div>
      <div>
        <div id="myChart3" v-if="userType2==1" :style="{width: '100%', height: '300px'}"></div>
      </div>
      <div class="titlts">
        <img src="../assets/list.png" alt srcset />
        <p>数据明细</p>
      </div>
      <div class="block" style="margin-top:30px;">
        <el-date-picker
          v-model="value4"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期2"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="setTime4"
        ></el-date-picker>
      </div>
      <div class="tabls">
        <el-table :data="userDayDataList" style="width: 100%">
          <el-table-column prop="date" align="center" label="时间">
            <template slot-scope="scope">{{scope.row.date}}</template>
          </el-table-column>
          <el-table-column prop="customerCount" align="center" label="新增客户"></el-table-column>
          <el-table-column prop="customerSum" align="center" label="累计客户"></el-table-column>
          <el-table-column prop="rechargeCount" align="center" label="新增续费商家"></el-table-column>
          <el-table-column prop="rechargeSum" align="center" label="累计续费商家"></el-table-column>
          <el-table-column prop="bizSum" align="center" label="新增商家"></el-table-column>
          <el-table-column prop="bizSum" align="center" label="累计商家"></el-table-column>
        </el-table>
      </div>
    </template>
    <bizaldio :bizState="bizState" @showInfoHistoryData="showInfoHistoryData" :bizId="bizId"></bizaldio>
    <cusaldio :cusState="cusState" @showInfoCusData="showInfoCusData" :cusId="cusId"></cusaldio>
  </div>
</template>
<style scoped lang="scss">
.paginationBox {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
.infoList {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  margin-bottom: 30px;
  .infoItem {
    background: #719bef;
    border-radius: 4px;
    width: 140px;
    height: 120px;
    padding: 10px 30px 0;
    p {
      color: #fff;
      text-align: center;
      line-height: 50px;
      height: 50px;
      font-size: 18px;
    }
    .num {
      border-top: 1px solid rgba(255, 255, 255, 0.5);
      font-weight: bold;
    }
  }
}
.wrap {
  margin-top: 30px;
}
.top {
  display: flex;
  align-items: center;
  border-bottom: 0.5px solid #e5e5e5;
  padding-bottom: 30px;
  margin-bottom: 30px;
}
.role {
  margin-left: 30px;
  .el-button {
    width: 100px;
    height: 30px;
    padding: 0;
  }
}
.m-table {
  margin: 30px 0;
}
.userheadInfo {
  display: flex;
  align-items: center;
  > img {
    display: block;
    width: 30px;
    height: 30px;
    background: red;
    border-radius: 50%;
    margin-right: 15px;
  }
  span {
    color: #999;
    font-size: 14px;
  }
  i {
    display: block;
    font-size: 10px;
    color: #999;
    font-style: normal;
    line-height: 1;

    margin-right: 8px;
  }
  .okl {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
}
.titlts {
  span {
    font-size: 12px;
    color: #999;
    margin-left: 15px;
    margin-top: 4px;
  }
}
.ol {
  display: flex;
  align-items: center;
  .el-input {
    width: 190px;
    margin-right: 15px;
    height: 30px;
  }
  >>> .el-input__inner {
    height: 30px;
  }
  .el-button {
    width: 100px;
    height: 30px;
    padding: 0;
  }
}
</style>
<script>
import {
  orderData,
  userDataDaily,
  customerOrder,
  newOrderDaily,
  bizOrder,
  newUser,
  customer,
  rechargeChart
} from "@/utils/interface";
import bizaldio from "./bizaldio";
import cusaldio from "./cusaldio";
export default {
  components: {
    bizaldio,
    cusaldio
  },
  data() {
    return {
      userType: 2,
      userType1: 2,
      userType2: 2,
      tableData: [
        {
          date: "今天",
          order: "",
          df: "",
          shrs: "",
          qhrs: "",
          khdf: "",
          sjdf: ""
        },
        {
          date: "昨天",
          order: "",
          df: "",
          shrs: "",
          qhrs: "",
          khdf: "",
          sjdf: ""
        },
        {
          date: "本月",
          order: "",
          df: "",
          shrs: "",
          qhrs: "",
          khdf: "",
          sjdf: ""
        },
        {
          date: "上月",
          order: "",
          df: "",
          shrs: "",
          qhrs: "",
          khdf: "",
          sjdf: ""
        },
        {
          date: "今年",
          order: "",
          df: "",
          shrs: "",
          qhrs: "",
          khdf: "",
          sjdf: ""
        },
        {
          date: "累计",
          order: "",
          df: "",
          shrs: "",
          qhrs: "",
          khdf: "",
          sjdf: ""
        }
      ],
      userDayData: {},
      biztableData: [],
      userDayDataList: [],
      custableData: [],
      currentPage: 1,
      pageSize: 3,
      currentPage2: 1,
      pageSize2: 3,
      total2: 0,
      value4: [],
      total: 0,
      value1: [],
      value2: [],
      value3: [],
      charts1: {
        date: [],
        data: []
      },
      charts2: {
        date: [],
        data: [],
        data2: []
      },
      charts3: {
        date: [],
        data: []
      },
      bizState: false,
      bizId: "",
      cusState: false,
      cusId: ""
    };
  },
  mounted() {
    this.getOrderData();
    this.userDataDaily();
    this.customerOrder();
    this.newOrderDaily();
    this.bizOrder();
  },
  methods: {
    setTime(e) {
      console.log(e);
      if (e) {
        this.newOrderDaily(e[0], e[1]);
      } else {
        this.newOrderDaily();
      }
    },
    setTime2(e) {
      console.log(e);
      if (e) {
        this.newUser(e[0], e[1]);
      } else {
        this.newUser();
      }
    },
    setTime3(e) {
      console.log(e);
      if (e) {
        this.customer(e[0], e[1]);
      } else {
        this.customer();
      }
    },
    setTime4(e) {
      console.log(e);
      if (e) {
        this.userDataDaily(e[0], e[1]);
      } else {
        this.userDataDaily();
      }
    },
    select(n) {
      this.userType = n;
      if (n == 1) {
        this.newUser();
      } else {
        this.newOrderDaily();
      }
    },
    select2(n) {
      this.userType2 = n;
      if (n == 2) {
        this.newUser();
      } else {
        this.customer();
      }
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          data: this.charts1.date
        },
        yAxis: {
          type: "value",
          splitArea: {
            show: true
          },

          nameTextStyle: {
            color: ["#0087ED"]
          },
          axisLine: {
            lineStyle: {
              color: "#999"
            }
          },
          axisLabel: {
            formatter: "{value}"
          }
        },
        series: [
          {
            data: this.charts1.data,
            type: "line",
            name: "订单量",
            stack: "总量"
          }
        ]
      });
    },
    drawLine2() {
      let myChart = this.$echarts.init(document.getElementById("myChart2"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        color: ["#0087ED", "#000000"],
        xAxis: {
          type: "category",
          data: this.charts2.date
        },
        yAxis: {
          type: "value",
          splitArea: {
            show: true
          },

          nameTextStyle: {
            color: ["#0087ED", "#000000"]
          },
          axisLine: {
            lineStyle: {
              color: "#999"
            }
          },
          axisLabel: {
            formatter: "{value}"
          }
        },
        series: [
          {
            data: this.charts2.data,
            type: "line",
            name: "新增账户",
            lineStyle: {
              normal: {
                color: "#0087ED"
              }
            },
            stack: "总量"
          },
          {
            data: this.charts2.data2,
            type: "line",
            name: "续费账户",
            lineStyle: {
              normal: {
                color: "#000000"
              }
            },
            stack: "总量"
          }
        ]
      });
    },
    drawLine3() {
      if (!document.getElementById("myChart3")) {
        console.log("kehu失败");
        return false;
      }
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart3"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          data: this.charts3.date
        },
        yAxis: {
          type: "value",
          splitArea: {
            show: true
          },

          nameTextStyle: {
            color: ["#0087ED"]
          },
          axisLine: {
            lineStyle: {
              color: "#999"
            }
          },
          axisLabel: {
            formatter: "{value}"
          }
        },
        series: [
          {
            data: this.charts3.data,
            type: "line",
            name: "新增账户"
          }
        ]
      });
    },
    // 订单商家统计
    getOrderData() {
      orderData().then(res => {
        this.tableData[0].order = res.data.data.order_today;
        this.tableData[1].order = res.data.data.order_yesterday;
        this.tableData[2].order = res.data.data.order_month;
        this.tableData[3].order = res.data.data.order_last_month;
        this.tableData[4].order = res.data.data.order_year;
        this.tableData[5].order = res.data.data.order_total;

        this.tableData[0].df = res.data.data.proxy_today;
        this.tableData[1].df = res.data.data.proxy_yesterday;
        this.tableData[2].df = res.data.data.proxy_month;
        this.tableData[3].df = res.data.data.proxy_last_month;
        this.tableData[4].df = res.data.data.proxy_year;
        this.tableData[5].df = res.data.data.proxy_total;

        this.tableData[0].shrs = res.data.data.supplier_today;
        this.tableData[1].shrs = res.data.data.supplier_yesterday;
        this.tableData[2].shrs = res.data.data.supplier_month;
        this.tableData[3].shrs = res.data.data.supplier_last_month;
        this.tableData[4].shrs = res.data.data.supplier_year;
        this.tableData[5].shrs = res.data.data.supplier_total;

        this.tableData[0].qhrs = res.data.data.customer_today;
        this.tableData[1].qhrs = res.data.data.customer_yesterday;
        this.tableData[2].qhrs = res.data.data.customer_month;
        this.tableData[3].qhrs = res.data.data.customer_last_month;
        this.tableData[4].qhrs = res.data.data.customer_year;
        this.tableData[5].qhrs = res.data.data.customer_total;

        this.tableData[0].khdf = res.data.data.customer_proxy_today;
        this.tableData[1].khdf = res.data.data.customer_proxy_yesterday;
        this.tableData[2].khdf = res.data.data.customer_proxy_month;
        this.tableData[3].khdf = res.data.data.customer_proxy_last_month;
        this.tableData[4].khdf = res.data.data.customer_proxy_year;
        this.tableData[5].khdf = res.data.data.customer_proxy_total;

        this.tableData[0].sjdf = res.data.data.biz_proxy_today;
        this.tableData[1].sjdf = res.data.data.biz_proxy_yesterday;
        this.tableData[2].sjdf = res.data.data.biz_proxy_month;
        this.tableData[3].sjdf = res.data.data.biz_proxy_last_month;
        this.tableData[4].sjdf = res.data.data.biz_proxy_year;
        this.tableData[5].sjdf = res.data.data.biz_proxy_total;
      });
    },
    // 用户订单数据统计
    userDataDaily(startTime, endTime) {
      userDataDaily({
        startTime,
        endTime
      }).then(res => {
        this.userDayData = res.data.data[res.data.data.length - 1];
        this.userDayDataList = res.data.data;
      });
    },
    // 用户订单数据，米西列表
    customerOrder() {
      customerOrder({
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        this.custableData = res.data.data.list;
        this.total = res.data.data.total;
      });
    },
    // 每日新增订单趋势
    newOrderDaily(startTime, endTime) {
      newOrderDaily({ startTime, endTime }).then(res => {
        this.charts1.date = [];
        this.charts1.data = [];
        res.data.data.map(item => {
          this.charts1.date.push(item.date.split("-")[2]);
          this.charts1.data.push(item.total);
        });
        this.$nextTick(() => {
          this.drawLine();
        });
      });
    },
    // 商家每日订单明细
    bizOrder() {
      bizOrder({
        currentPage: this.currentPage2,
        pageSize: this.pageSize2
      }).then(res => {
        this.biztableData = res.data.data.list;
        this.total2 = res.data.data.total;
      });
    },
    // 商家分页
    setpage2(e) {
      this.currentPage2 = e;
      this.bizOrder();
    },
    // 用户分页
    setpage(e) {
      this.currentPage = e;
      this.customerOrder();
    },
    // 获取月度每日新增商家用户
    newUser(start_date, end_date) {
      newUser({ start_date, end_date }).then(res => {
        this.charts2.date = [];
        this.charts2.data = [];
        res.data.data.map(item => {
          this.charts2.date.push(item.date.split("-")[2]);
          this.charts2.data.push(item.total);
        });
        this.rechargeChart(start_date, end_date);
      });
    },
    customer(start_date, end_date) {
      customer({ start_date, end_date }).then(res => {
        this.charts3.date = [];
        this.charts3.data = [];
        res.data.data.map(item => {
          this.charts3.date.push(item.date.split("-")[2]);
          this.charts3.data.push(item.total);
        });

        this.$nextTick(() => {
          this.drawLine3();
        });
      });
    },
    rechargeChart(start_date, end_date) {
      rechargeChart({ start_date, end_date }).then(res => {
        this.charts2.data2 = [];
        res.data.data.map(item => {
          this.charts2.data2.push(item.total);
        });

        this.$nextTick(() => {
          this.drawLine2();
        });
      });
    },
    showInfoHistory(e) {
      console.log(e);
      this.bizId = e;
      this.bizState = true;
    },
    showInfoHistoryData(e) {
      console.log(e);
      this.bizState = false;
    },
    showInfoCus(e) {
      console.log(e);
      this.cusState = true;
      this.cusId = e;
    },
    showInfoCusData(e) {
      this.cusState = false;
    }
  }
};
</script>